JavaScript Performans Regresyonunu Önleme: Otomatik Performans Testleri

Günümüzün hızlı dijital dünyasında, web sitesi ve uygulama performansı kullanıcı memnuniyeti, etkileşim ve nihayetinde iş başarısı için kritik öneme sahiptir. Yavaş yüklenen veya yanıt vermeyen bir uygulama, hüsrana uğramış kullanıcılara, terk edilmiş işlemlere ve markanızın itibarı üzerinde olumsuz bir etkiye yol açabilir. Modern web geliştirmenin temel bir bileşeni olan JavaScript, genel performansta önemli bir rol oynar. Bu nedenle, performans regresyonlarını – performansta beklenmedik düşüşleri – önlemek çok önemlidir. İşte bu noktada otomatik performans testleri devreye girer.

JavaScript Performans Regresyonu Nedir?

Bir performans regresyonu, yeni bir kod değişikliği veya güncellemenin bir JavaScript uygulamasının performansında bir düşüşe neden olduğunda meydana gelir. Bu, çeşitli şekillerde ortaya çıkabilir, örneğin:

• Artan sayfa yükleme süresi: Kullanıcılar, sayfa tamamen etkileşimli hale gelmeden önce daha uzun bekleme süreleri yaşar.
• Daha yavaş görüntü oluşturma: Görsel öğelerin ekranda görünmesi daha uzun sürer.
• Azaltılmış kare hızı: Animasyonlar ve geçişler kesik kesik ve daha az akıcı görünür.
• Artan bellek tüketimi: Uygulama daha fazla bellek kullanır, bu da potansiyel olarak çökmelere veya yavaşlamalara yol açar.
• Artan CPU kullanımı: Uygulama daha fazla işlem gücü tüketir, bu da mobil cihazlarda pil ömrünü etkiler.

Bu regresyonlar, özellikle çok sayıda birbiriyle bağlantılı bileşene sahip karmaşık uygulamalarda, manuel testler sırasında ince olabilir ve kolayca gözden kaçabilir. Yalnızca üretime dağıtıldıktan sonra ortaya çıkabilir ve çok sayıda kullanıcıyı etkileyebilirler.

Otomatik Performans Testlerinin Önemi

Otomatik performans testi, performans regresyonlarını kullanıcılarınızı etkilemeden önce proaktif olarak belirlemenizi ve ele almanızı sağlar. Çeşitli performans metriklerini ölçen ve bunları önceden tanımlanmış eşiklerle veya temel çizgilerle karşılaştıran otomatik komut dosyaları oluşturmayı içerir. Bu yaklaşım birkaç temel fayda sunar:

• Erken Tespit: Geliştirme döngüsünün başlarında performans sorunlarını belirleyerek üretime ulaşmalarını önleyin.
• Tutarlılık ve Güvenilirlik: Otomatik testler, insan hatasını ve öznelliği ortadan kaldırarak tutarlı ve güvenilir sonuçlar sağlar.
• Daha Hızlı Geri Bildirim: Kod değişikliklerinin performans etkisi hakkında anında geri bildirim alarak hızlı yineleme ve optimizasyon sağlayın.
• Azaltılmış Maliyetler: Performans sorunlarını geliştirme sürecinin başlarında düzelterek, iyileştirme için gereken maliyet ve çabayı önemli ölçüde azaltın.
• İyileştirilmiş Kullanıcı Deneyimi: Sürekli olarak hızlı ve duyarlı bir kullanıcı deneyimi sunarak kullanıcı memnuniyetini ve etkileşimini artırın.
• Sürekli İzleme: Sürekli performans izleme için performans testlerini sürekli entegrasyon/sürekli teslimat (CI/CD) ardışık düzeninize entegre edin.

İzlenecek Temel Performans Metrikleri

Otomatik performans testi uygularken, kullanıcı deneyimini doğrudan etkileyen temel performans metriklerine odaklanmak önemlidir. En önemli metriklerden bazıları şunlardır:

• First Contentful Paint (FCP): İlk içeriğin (metin, resim vb.) ekranda görünmesi için geçen süreyi ölçer.
• Largest Contentful Paint (LCP): En büyük içerik öğesinin ekranda görünmesi için geçen süreyi ölçer.
• First Input Delay (FID): Tarayıcının kullanıcının ilk etkileşimine (örneğin, bir düğmeye tıklama) yanıt vermesi için geçen süreyi ölçer.
• Time to Interactive (TTI): Sayfanın tamamen etkileşimli hale gelmesi ve kullanıcı girdisine yanıt vermesi için geçen süreyi ölçer.
• Total Blocking Time (TBT): Sayfa yüklemesi sırasında ana iş parçacığının engellendiği toplam süreyi ölçer, bu da tarayıcının kullanıcı girdisine yanıt vermesini engeller.
• Cumulative Layout Shift (CLS): Sayfa yüklemesi sırasında meydana gelen ve görsel kararsızlığa neden olan beklenmedik düzen kaymalarının miktarını ölçer.
• JavaScript yürütme süresi: JavaScript kodunu yürütmek için harcanan süre.
• Bellek kullanımı: Uygulama tarafından tüketilen bellek miktarı.
• CPU kullanımı: Uygulama tarafından tüketilen işlem gücü miktarı.
• Ağ istekleri: Uygulama tarafından yapılan ağ isteklerinin sayısı ve boyutu.

Otomatik JavaScript Performans Testleri için Araçlar ve Teknolojiler

Otomatik JavaScript performans testini uygulamak için çeşitli araçlar ve teknolojiler kullanılabilir. İşte birkaç popüler seçenek:

• WebPageTest: Web sitesi performansını çeşitli konumlardan ve cihazlardan test etmek için ücretsiz ve açık kaynaklı bir araçtır. Şelale grafikleri, film şeritleri ve temel web verileri metrikleri dahil olmak üzere ayrıntılı performans raporları sunar. WebPageTest, API'si aracılığıyla otomatikleştirilebilir.
• Lighthouse: Google tarafından geliştirilen, web sayfalarını performans, erişilebilirlik, en iyi uygulamalar ve SEO açısından denetleyen açık kaynaklı bir araçtır. Performansı artırmak için ayrıntılı öneriler sunar. Lighthouse komut satırından, Chrome Geliştirici Araçları'ndan veya bir Node modülü olarak çalıştırılabilir.
• PageSpeed Insights: Google tarafından sağlanan, web sayfalarınızın hızını analiz eden ve iyileştirme önerileri sunan bir araçtır. Analiz motoru olarak Lighthouse'u kullanır.
• Chrome DevTools: Chrome tarayıcısındaki yerleşik geliştirici araçları, Performans paneli, Bellek paneli ve Ağ paneli dahil olmak üzere kapsamlı bir performans analizi araçları paketi sunar. Bu araçlar JavaScript kodunu profillemek, performans darboğazlarını belirlemek ve bellek kullanımını izlemek için kullanılabilir. Chrome Geliştirici Araçları, Puppeteer veya Playwright kullanılarak otomatikleştirilebilir.
• Puppeteer ve Playwright: Başsız Chrome veya Firefox tarayıcılarını kontrol etmek için üst düzey bir API sağlayan Node kütüphaneleridir. Tarayıcı etkileşimlerini otomatikleştirmek, performans metriklerini ölçmek ve performans raporları oluşturmak için kullanılabilirler. Playwright, Chrome, Firefox ve Safari'yi destekler.
• Sitespeed.io: WebPageTest, Lighthouse ve Browsertime gibi birden fazla web performansı aracından veri toplayan ve bunları tek bir panoda sunan açık kaynaklı bir araçtır.
• Browsertime: Chrome veya Firefox kullanarak tarayıcı performans metriklerini ölçen bir Node.js aracıdır.
• Jest: Birim testi ve entegrasyon testi için kullanılabilen popüler bir JavaScript test çerçevesidir. Jest, kod parçacıklarının yürütme süresini ölçerek performans testi için de kullanılabilir.
• Mocha ve Chai: Başka bir popüler JavaScript test çerçevesi ve iddia kütüphanesi. Bu araçlar, benchmark.js gibi performans testi kütüphaneleriyle birleştirilebilir.
• Performans İzleme Araçları (ör. New Relic, Datadog, Sentry): Bu araçlar, üretimdeki performans sorunlarını tespit etmenize ve teşhis etmenize olanak tanıyan gerçek zamanlı performans izleme ve uyarı yetenekleri sağlar.

Otomatik Performans Testini Uygulama: Adım Adım Kılavuz

İşte JavaScript projelerinizde otomatik performans testini uygulamak için adım adım bir kılavuz:

1. Performans Bütçelerini Tanımlayın

Performans bütçesi, uygulamanızın uyması gereken temel performans metrikleri üzerindeki bir dizi sınırdır. Bu bütçeler, geliştiriciler için kılavuz görevi görür ve performans optimizasyonu için net bir hedef sağlar. Performans bütçesi örnekleri şunları içerir:

• Sayfa yükleme süresi: 3 saniyenin altında bir sayfa yükleme süresi hedefleyin.
• First Contentful Paint (FCP): 1 saniyenin altında bir FCP hedefleyin.
• JavaScript paket boyutu: JavaScript paketlerinizin boyutunu 500 KB'nin altında sınırlayın.
• HTTP isteklerinin sayısı: HTTP isteklerinin sayısını 50'nin altına düşürün.

Uygulamanızın gereksinimlerine ve hedef kitlenize göre gerçekçi ve ulaşılabilir performans bütçeleri tanımlayın. Ağ koşulları, cihaz yetenekleri ve kullanıcı beklentileri gibi faktörleri göz önünde bulundurun.

2. Doğru Araçları Seçin

İhtiyaçlarınıza ve bütçenize en uygun araçları ve teknolojileri seçin. Aşağıdaki gibi faktörleri göz önünde bulundurun:

• Kullanım kolaylığı: Açık belgeleri ve destekleyici bir topluluğu olan, öğrenmesi ve kullanması kolay araçları seçin.
• Mevcut iş akışlarıyla entegrasyon: Mevcut geliştirme ve test iş akışlarınıza sorunsuz bir şekilde entegre olan araçları seçin.
• Maliyet: Lisans ücretleri ve altyapı maliyetleri dahil olmak üzere araçların maliyetini göz önünde bulundurun.
• Özellikler: Performans profilleme, raporlama ve uyarı gibi ihtiyacınız olan özellikleri sunan araçları seçin.

Küçük bir araç setiyle başlayın ve ihtiyaçlarınız geliştikçe araç setinizi kademeli olarak genişletin.

3. Performans Testi Komut Dosyaları Oluşturun

Uygulamanızdaki kritik kullanıcı akışlarının ve bileşenlerinin performansını ölçen otomatik test komut dosyaları yazın. Bu komut dosyaları gerçek kullanıcı etkileşimlerini simüle etmeli ve temel performans metriklerini ölçmelidir.

Puppeteer kullanarak sayfa yükleme süresini ölçme örneği:

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 const url = 'https://www.example.com';

 const navigationPromise = page.waitForNavigation({waitUntil: 'networkidle0'});
 await page.goto(url);
 await navigationPromise;

 const metrics = await page.metrics();

 console.log(`${url} için sayfa yükleme süresi: ${metrics.timestamps.loadEventEnd - metrics.timestamps.navigationStart}ms`);

 await browser.close();
})();

Bu komut dosyası, başsız bir Chrome tarayıcısı başlatmak, belirtilen bir URL'ye gitmek, sayfanın yüklenmesini beklemek ve ardından sayfa yükleme süresini ölçmek için Puppeteer'ı kullanır. `waitForNavigation` içindeki `networkidle0` seçeneği, tarayıcının sayfayı yüklenmiş olarak kabul etmeden önce en az 500 ms boyunca başka ağ bağlantısı kalmayana kadar beklemesini sağlar.

Browsertime ve Sitespeed.io kullanan başka bir örnek, Core Web Vitals'a odaklanıyor:

// Gerekli paketleri kurun:
// npm install -g browsertime sitespeed.io

// Testi çalıştırın (örnek komut satırı kullanımı):
// sitespeed.io https://www.example.com --browsertime.iterations 3 --browsertime.xvfb

// Bu komut şunları yapacaktır:
// 1. Belirtilen URL'ye karşı Browsertime'ı 3 kez çalıştırır.
// 2. Başsız (headless) test için sanal bir X sunucusu (xvfb) kullanır.
// 3. Sitespeed.io sonuçları toplayacak ve Core Web Vitals dahil bir rapor sunacaktır.

// Rapor, LCP, FID, CLS ve diğer performans metriklerini gösterecektir.

Bu örnek, otomatik performans testleri çalıştırmak ve Core Web Vitals'ı almak için Sitespeed.io'nun Browsertime ile nasıl kurulacağını gösterir. Komut satırı seçenekleri, sitespeed.io ile bir browsertime testi çalıştırmaya özgüdür.

4. Performans Testlerini CI/CD Ardışık Düzeninize Entegre Edin

Kod değişiklikleri her yapıldığında otomatik olarak çalıştırmak için performans testlerinizi CI/CD ardışık düzeninize entegre edin. Bu, performansın sürekli olarak izlenmesini ve regresyonların erken tespit edilmesini sağlar.

Jenkins, GitLab CI, GitHub Actions ve CircleCI gibi çoğu CI/CD platformu, derleme sürecinin bir parçası olarak otomatik testleri çalıştırmak için mekanizmalar sağlar. Performans testi komut dosyalarınızı çalıştırmak ve performans bütçelerinden herhangi biri aşılırsa derlemeyi başarısız kılmak için CI/CD ardışık düzeninizi yapılandırın.

GitHub Actions kullanarak örnek:

name: Performance Tests

on:
 push:
 branches: [ main ]
 pull_request:
 branches: [ main ]

jobs:
 performance:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2
 - name: Set up Node.js
 uses: actions/setup-node@v2
 with:
 node-version: '16'
 - name: Install dependencies
 run: npm install
 - name: Run performance tests
 run: npm run performance-test
 env:
 PERFORMANCE_BUDGET_PAGE_LOAD_TIME: 3000 # milisaniye

Bu GitHub Actions iş akışı, Ubuntu üzerinde çalışan "performance" adlı bir iş tanımlar. Kodu alır, Node.js'i kurar, bağımlılıkları yükler ve ardından `npm run performance-test` komutunu kullanarak performans testlerini çalıştırır. `PERFORMANCE_BUDGET_PAGE_LOAD_TIME` ortam değişkeni, sayfa yükleme süresi için performans bütçesini tanımlar. `npm run performance-test` betiği, performans testlerinizi yürütmek için gerekli komutları içermelidir (örneğin, Puppeteer, Lighthouse veya WebPageTest kullanarak). `package.json` dosyanız, testleri yürüten ve sonuçları tanımlanan bütçelere göre kontrol eden `performance-test` betiğini içermelidir; bütçeler ihlal edilirse sıfır olmayan bir çıkış koduyla çıkarak CI derlemesinin başarısız olmasına neden olur.

5. Performans Sonuçlarını Analiz Edin ve Raporlayın

İyileştirme alanlarını belirlemek için performans testlerinizin sonuçlarını analiz edin. Performans metriklerini özetleyen ve performans bütçelerinin regresyonlarını veya ihlallerini vurgulayan raporlar oluşturun.

Çoğu performans testi aracı, yerleşik raporlama yetenekleri sunar. Zaman içindeki performans eğilimlerini izlemek ve altta yatan performans sorunlarını gösterebilecek kalıpları belirlemek için bu raporları kullanın.

Bir performans raporu örneği (basitleştirilmiş):

Performans Raporu:

URL: https://www.example.com

Metrikler:
 First Contentful Paint (FCP): 0.8s (GEÇTİ)
 Largest Contentful Paint (LCP): 2.2s (GEÇTİ)
 Time to Interactive (TTI): 2.8s (GEÇTİ)
 Total Blocking Time (TBT): 150ms (GEÇTİ)
 Sayfa Yükleme Süresi: 2.9s (GEÇTİ) - Bütçe: 3.0s

JavaScript Paket Boyutu: 480KB (GEÇTİ) - Bütçe: 500KB

Performans regresyonu tespit edilmedi.

Bu rapor, belirli bir URL için performans metriklerini özetler ve tanımlanan performans bütçelerine göre geçip geçmediklerini belirtir. Ayrıca herhangi bir performans regresyonunun tespit edilip edilmediğini de belirtir. Böyle bir rapor, test betikleriniz içinde oluşturulabilir ve CI/CD çıktısına eklenebilir.

6. Yineleyin ve Optimize Edin

Performans sonuçlarınızın analizine dayanarak, optimizasyon için alanları belirleyin ve performansı artırmak için kodunuz üzerinde yineleme yapın. Yaygın optimizasyon teknikleri şunları içerir:

• Kod Bölme (Code Splitting): Büyük JavaScript paketlerini, isteğe bağlı olarak yüklenebilen daha küçük, daha yönetilebilir parçalara ayırın.
• Tembel Yükleme (Lazy Loading): Kritik olmayan kaynakların yüklenmesini ihtiyaç duyulana kadar erteleyin.
• Görüntü Optimizasyonu: Görüntüleri sıkıştırarak, uygun boyutlara yeniden boyutlandırarak ve WebP gibi modern görüntü formatlarını kullanarak optimize edin.
• Önbellekleme (Caching): Ağ isteklerinin sayısını azaltmak için tarayıcı önbelleklemesinden yararlanın.
• Küçültme ve Çirkinleştirme (Minification and Uglification): Gereksiz karakterleri ve boşlukları kaldırarak JavaScript ve CSS dosyalarınızın boyutunu azaltın.
• Debouncing ve Throttling: Kullanıcı olayları tarafından tetiklenen hesaplama açısından pahalı işlemlerin sıklığını sınırlayın.
• Verimli Algoritmalar ve Veri Yapıları Kullanma: Özel kullanım durumlarınız için en verimli algoritmaları ve veri yapılarını seçin.
• Bellek Sızıntılarından Kaçınma: Kodunuzun artık ihtiyaç duyulmadığında belleği düzgün bir şekilde serbest bıraktığından emin olun.
• Üçüncü Taraf Kütüphaneleri Optimize Etme: Üçüncü taraf kütüphanelerin performans etkisini değerlendirin ve gerekirse alternatifler seçin. Üçüncü taraf betikleri tembel yüklemeyi düşünün.

Uygulamanızın performansını sürekli olarak izleyin ve gerektiğinde test ve optimizasyon sürecini tekrarlayın.

JavaScript Performans Testi için En İyi Uygulamalar

İşte otomatik JavaScript performans testi uygularken izlenmesi gereken bazı en iyi uygulamalar:

• Gerçekçi Bir Ortamda Test Edin: Performans testlerinizi üretim ortamınıza çok benzeyen bir ortamda çalıştırın. Bu, ağ koşulları, cihaz yetenekleri ve sunucu yapılandırması gibi faktörleri içerir.
• Tutarlı Bir Test Metodolojisi Kullanın: Sonuçlarınızın zamanla karşılaştırılabilir olmasını sağlamak için tutarlı bir test metodolojisi kullanın. Bu, yineleme sayısı, ısınma süresi ve ölçüm aralığı gibi faktörleri içerir.
• Üretimde Performansı İzleyin: Uygulamanızın üretimdeki performansını sürekli olarak izlemek için performans izleme araçlarını kullanın. Bu, test sırasında yakalanamayabilecek performans sorunlarını tespit etmenize ve teşhis etmenize olanak tanır.
• Her Şeyi Otomatikleştirin: Test yürütme, sonuç analizi ve rapor oluşturma dahil olmak üzere performans testi sürecinin mümkün olduğunca fazlasını otomatikleştirin.
• Testleri Güncel Tutun: Kod değişiklikleri yapıldığında performans testlerinizi güncelleyin. Bu, testlerinizin her zaman alakalı olmasını ve uygulamanızın performansını doğru bir şekilde yansıtmasını sağlar.
• Tüm Ekibi Dahil Edin: Performans testi sürecine tüm geliştirme ekibini dahil edin. Bu, performans sorunları konusunda farkındalığı artırmaya ve bir performans optimizasyonu kültürü oluşturmaya yardımcı olur.
• Uyarılar Ayarlayın: Performans regresyonları tespit edildiğinde sizi bilgilendirecek uyarılar yapılandırın. Bu, performans sorunlarına hızla yanıt vermenizi ve kullanıcılarınızı etkilemelerini önlemenizi sağlar.
• Testlerinizi ve Süreçlerinizi Belgeleyin: Performans testlerinizi, performans bütçelerinizi ve test süreçlerinizi belgeleyin. Bu, ekipteki herkesin performansın nasıl ölçüldüğünü ve izlendiğini anlamasını sağlamaya yardımcı olur.

Yaygın Zorlukların Üstesinden Gelmek

Otomatik performans testi çok sayıda fayda sunarken, bazı zorlukları da beraberinde getirir. İşte bazı yaygın engellerin nasıl aşılacağı:

• Kararsız Testler (Flaky Tests): Performans testleri bazen kararsız olabilir, yani ağ tıkanıklığı veya sunucu yükü gibi kontrolünüz dışındaki faktörler nedeniyle aralıklı olarak başarılı veya başarısız olabilirler. Bunu azaltmak için testleri birden çok kez çalıştırın ve sonuçların ortalamasını alın. Aykırı değerleri belirlemek ve filtrelemek için istatistiksel teknikler de kullanabilirsiniz.
• Test Komut Dosyalarının Bakımı: Uygulamanız geliştikçe, performans testi komut dosyalarınızın değişiklikleri yansıtacak şekilde güncellenmesi gerekecektir. Bu, zaman alıcı ve hataya açık bir süreç olabilir. Bunu ele almak için modüler ve bakımı yapılabilir bir test mimarisi kullanın ve test komut dosyalarını otomatik olarak oluşturup güncelleyebilen test otomasyon araçlarını kullanmayı düşünün.
• Sonuçları Yorumlama: Performans testi sonuçları karmaşık ve yorumlanması zor olabilir. Bunu ele almak için açık ve özlü raporlama ve görselleştirme araçları kullanın. Ayrıca bir temel performans seviyesi oluşturmak ve sonraki test sonuçlarını bu temel çizgiyle karşılaştırmak da faydalı olabilir.
• Üçüncü Taraf Hizmetlerle Başa Çıkma: Uygulamanız, kontrolünüz dışındaki üçüncü taraf hizmetlere dayanabilir. Bu hizmetlerin performansı, uygulamanızın genel performansını etkileyebilir. Bunu ele almak için bu hizmetlerin performansını izleyin ve performans testi sırasında uygulamanızı izole etmek için taklit (mocking) veya saptama (stubbing) tekniklerini kullanmayı düşünün.

Sonuç

Otomatik JavaScript performans testi, sürekli olarak hızlı ve verimli bir kullanıcı deneyimi sağlamak için çok önemli bir uygulamadır. Otomatik testler uygulayarak, performans regresyonlarını proaktif olarak belirleyip ele alabilir, geliştirme maliyetlerini azaltabilir ve yüksek kaliteli bir ürün sunabilirsiniz. Doğru araçları seçin, net performans bütçeleri tanımlayın, testleri CI/CD ardışık düzeninize entegre edin ve uygulamanızın performansını sürekli olarak izleyin ve optimize edin. Bu uygulamaları benimseyerek, yalnızca işlevsel değil aynı zamanda performanslı JavaScript uygulamaları oluşturabilir, kullanıcılarınızı memnun edebilir ve iş başarısını artırabilirsiniz.

Performansın tek seferlik bir düzeltme değil, devam eden bir süreç olduğunu unutmayın. Dünyanın neresinde olurlarsa olsunlar, kullanıcılarınız için mümkün olan en iyi deneyimi sunmak için JavaScript kodunuzu sürekli olarak izleyin, test edin ve optimize edin.

İleri Kaynaklar

• Web Vitals
• Lighthouse
• WebPageTest
• Sitespeed.io
• Puppeteer
• Playwright